<template>
  <div class="mark-callout" :style="style" v-show="visible" @click.stop>
    <div class="callout-top clearfix">
      <div class="callout-top-person float-l">
        <img :src="curSuggetion.logo" class="head-img vam">
        <span class="note-name" v-text="curSuggetion.realName"></span>
      </div>
      <div class="note-time float-r" v-text="curSuggetion.createTime"></div>
    </div>
    <div class="callout-top-con" v-html="html">
    </div>
    <div class="callout-top-bottom clearfix">
      <div class="float-l">
        <a href="javascript:;" class="color-9">
          <i class="iconfont icon-thumb"></i>
          <span v-text="curSuggetion.thumbSupNum"></span>
        </a>
      </div>
      <div class="float-r">
        <a href="javascript:;" class="btn-cancel01 mr05" v-show="noop && isMine" @click="accept(true)">接受</a>
        <a href="javascript:;" class="btn-cancel01" v-show="noop && isMine" @click="accept(false)">拒绝</a>
        <span  v-show="noop && !isMine">未处理</span>
        <span class="color-8a" v-show="accepted">已接受</span>
        <span class="color-ce" v-show="rejected">已拒绝</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions, mapGetters, mapMutations } from 'vuex'
  import { Observer, findIndex } from '../../core/util'
  import { SUGGESTION_NOOP, SUGGESTION_ACCEPT, SUGGESTION_REJECT } from '../../core/constant'
  import xss from 'xss'
  export default {
    data() {
      return {
        top: 0,
        left: 0,
        visible: false
      }
    },
    computed: {
      ...mapState(['map', 'currentUser']),
      ...mapGetters('review', ['curSuggetion']),
      style() {
        return {
          top: this.top + 'px',
          left: this.left + 'px',
          // isMine: false
        }
      },
      html() {
        return xss(this.curSuggetion.content);
      },
      noop() {
        return this.curSuggetion.dealStatus === SUGGESTION_NOOP;
      },
      accepted() {
        return this.curSuggetion.dealStatus === SUGGESTION_ACCEPT;
      },
      rejected() {
        return this.curSuggetion.dealStatus === SUGGESTION_REJECT
      },
      isMine() {
        let authorList = (this.map[this.curSuggetion.sectionId] || {}).authorList || [];
        return !authorList.length || findIndex(authorList, 'userId', this.currentUser.userId) > -1
      }
    },
    methods: {
      ...mapMutations('review', ['select']),
      ...mapActions('review', ['selectById', 'accept']),
      show({top, left, width, id, isMine}) {
        this.visible = true;
        // this.isMine = isMine;
        this.top = top - 128;
        this.left = left + width / 2 - 170;
      },
      hide() {
        this.visible = false;
        this.select(null);
      }
    }
  }
</script>